<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>下载</title>
  <link href="/css/output.min.css?t=20250529" rel="stylesheet">
  <link href="/css/font-awesome.min.css?t=20250529" rel="stylesheet">
  <link href="/css/main.css?t=20250529" rel="stylesheet">

</head>
<body class="font-inter bg-gray-50 text-neutral-700 min-h-screen">
  <div class="container mx-auto px-4 py-6 max-w-md">
    <!-- 标题区域 -->
    <header class="mb-6 flex justify-between items-center">
      <h1 class="text-[clamp(1.5rem,5vw,2rem)] font-bold text-primary">下载</h1>
      <!--<button id="published-videos-btn" class="btn-hover-effect bg-primary/10 text-primary px-4 py-2 rounded-lg text-sm font-medium flex items-center">
        <i class="fa fa-film mr-2"></i>已发布视频
      </button>-->
    </header>
    
    <!-- 信息卡片 -->
    <div class="bg-white rounded-xl shadow-sm p-5 mb-6 border border-neutral-200">
      <div class="space-y-3">
        <div class="flex items-center">
          <span class="text-neutral-600">帐号信息：</span>
          <span id="account" class="font-medium text-neutral-800">-</span>
        </div>
        <div class="flex items-center">
          <span class="text-neutral-600">设备别名：</span>
          <span id="phoneAlias" class="font-medium text-neutral-800">-</span>
        </div>
        <div class="flex items-center">
          <span class="text-neutral-600">设备IP：</span>
          <span id="phoneIp" class="font-medium text-neutral-800">-</span>
        </div>
        <!--<div class="flex items-center">
          <span class="text-neutral-600">设备型号：</span>
          <span id="device-model" class="font-medium text-neutral-800">-</span>
        </div>-->
        <div class="flex items-center">
          <span class="text-neutral-600">系统版本：</span>
          <span id="os-version" class="font-medium text-neutral-800">-</span>
        </div>
        <div class="flex items-start">
          <span class="text-neutral-600">
            视频文件名：<span id="video-filename" class="font-medium text-neutral-800 word-wrap-anywhere">-</span>
          </span>
        </div>
      </div>
    </div>
    
    <!-- 话题区域 -->
    <div class="mb-4">
      <div id="tags-container" class="tag-scroll">
        <span class="text-neutral-600 mr-2">话题：</span>
        <span id="video-tags" class="text-primary">加载中...</span>
      </div>
      
      <!-- 复制话题和下载视频按钮 -->
      <div class="flex space-x-3 mt-3">
        <button id="copy-tags-btn" class="btn-hover-effect flex-1 bg-primary text-white py-2 px-4 rounded-lg flex items-center justify-center">
          <i class="fa fa-copy mr-2"></i>复制话题
        </button>
        <button id="download-video-btn" class="btn-hover-effect flex-1 bg-secondary text-white py-2 px-4 rounded-lg flex items-center justify-center">
          <i class="fa fa-download mr-2"></i>下载视频
        </button>
      </div>
    </div>
    
    <!-- 视频区域 -->
    <div class="relative mb-8 group">
      <div id="video-placeholder" class="relative w-full rounded-xl overflow-hidden shadow-md cursor-pointer bg-neutral-100">
        <div class="aspect-video flex items-center justify-center">
          <img id="video-cover" src="https://picsum.photos/800/450" alt="视频封面" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-black/30 flex items-center justify-center">
            <div class="w-16 h-16 rounded-full bg-white/80 flex items-center justify-center scale-on-hover">
              <i class="fa fa-play text-primary text-xl"></i>
            </div>
          </div>
        </div>
      </div>
      
      <video id="video-player" class="hidden relative inset-0 w-full h-full rounded-xl object-cover" controls playsinline>
        <source id="video-source" src="" type="video/mp4">
        您的浏览器不支持视频播放。
      </video>
    </div>
    
    <!-- 按钮区域 -->
    <div class="flex space-x-4 justify-center">
      <button id="upload-btn" class="btn-hover-effect flex-1 max-w-[160px] bg-secondary text-white font-medium py-3 px-6 rounded-full shadow-md">
        <i class="fa fa-share-alt mr-2"></i>我已发布
      </button>
      <button id="change-btn" class="btn-hover-effect flex-1 max-w-[160px] bg-primary text-white font-medium py-3 px-6 rounded-full shadow-md">
        <i class="fa fa-refresh mr-2"></i>换一个
      </button>
    </div>
  </div>
  
  <!-- 加载遮罩 -->
  <div id="loading-overlay" class="fixed inset-0 bg-black/50 z-50 flex loading-center justify-center hidden">
    <div class="bg-white rounded-lg p-6 shadow-xl flex flex-col items-center">
      <div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
      <p id="loading-text" class="text-neutral-700">加载中...</p>
    </div>
  </div>
  
  <!-- 操作结果提示 -->
  <div id="toast" class="fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-neutral-800 text-white px-6 py-3 rounded-full shadow-lg opacity-0 transition-opacity duration-300 flex items-center">
    <i id="toast-icon" class="fa fa-check-circle mr-2"></i>
    <span id="toast-message">操作成功</span>
  </div>
  <script src="/scripts/jquery-3.6.0.min.js?t=20250529"></script>
  <script src="/scripts/script.js?t=20250529"></script>
</body>
</html>